import { useState, useRef, useEffect } from 'react';
import { VChart } from '@visactor/react-vchart';
import styles from "./chart.module.css";
const StackedLineChartCard = ({props}) => {
  const chartRef = useRef(null);
  useEffect(() => {
    window['vchart'] = chartRef;
  }, []);

  const spec = {
    type: 'line',
    data: {
        values: props,
    },
    title: {
        visible: true,
        text: 'Stacked line chart'
    },
    stack: true,
    xField: 'type',
    yField: 'value',
    seriesField: 'country',
    line: {
        style: {
        curveType: 'monotone'
        }
    },
    point: {
        style: {
        size: 0,
        fill: 'white',
        stroke: null,
        lineWidth: 2
        },
        state: {
        dimension_hover: {
            size: 10
        }
        }
    },
    legends: [{ visible: true, position: 'middle', orient: 'bottom' }]
  };

  return (
     <div className={`${styles.chartCard} ${styles.wideSquare}`}>
         <VChart
            ref={chartRef}
            spec={spec}
        />
     </div>
  );
};

export default StackedLineChartCard;